<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>下载中心</el-breadcrumb-item>
      <el-breadcrumb-item>上传文档</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-form ref="addform" :rules="rules" label-width="100px" size="mini" class="demo-ruleForm" :model="addform">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="文档标题:" prop="title">
              <el-input v-model="addform.title"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" >
          <el-col :span="6" >
            <el-form-item label="文档描述:" prop="remark">
              <el-input type="textarea" v-model="addform.remark" :style="{width:'300px',height:'250px'}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" >
          <el-col :span="6" >
            <el-form-item label="文档:" prop="content">
              <el-input type="file" v-model="file" name="file" id="input-file"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" size="small" @click="uploadDocument (addform)">上传</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button size="small" @click="resetForm('addform')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data(){
    return {
      addform: {
        title: '',
        remark: '',
        filename: ''
      },
      file:"",
      rules: {
        title: [
          { required: true, message: '请输入文档标题', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入文档描述', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    uploadDocument() {
      this.$refs.addform.validate(valid => {
        if (valid) {
          const fileInput = document.getElementById('input-file');
          const file = fileInput.files[0];

          if (!file) {
            this.$message.error('请选择文件');
            return;
          }

          const formData = new FormData();
          formData.append('file', file);

          this.$http.post('/document/upload', formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }).then( async response => {
            console.log(response.data);
            if (response.data.code === 200){
              this.addform.filename = response.data.data
              const  {data:res}  = await this.$http.post("/document/add", this.addform);
              console.log(res)
              if(res.code === 200){
                this.$message.success(res.message)
                this.resetForm('addform')//重置表单
              }else{
                this.$message.error(res.message)
              }
            }else{
              this.$message.error(response.data.message);
            }
          }).catch(error => {
            console.error(error);

          });
        } else {
          this.$message.error('请填写必填字段');
          return false;
        }
      });
    }
  }
}
</script>

<style>
#input-file{
  border: none !important;
}
.el-textarea .el-textarea__inner{
  height: 250px;
}
</style>